<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>资讯系统</el-breadcrumb-item>
			<el-breadcrumb-item>员工签到</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片式图 -->
		<el-card class="box-card">
			<!-- 搜索添加区 -->
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input @clear="getuserchecklist" clearable placeholder="请输入用户名称" v-model="formInline.UserName" class="input-with-select"></el-input>
				</el-form-item>
				<el-form-item label="打卡时间">
					<el-date-picker v-model="formInline.starttime" type="datetime" placeholder="选择开始时间" align="right" :picker-options="pickerOptions"></el-date-picker>
					<span class="demonstration">~</span>
					<el-date-picker v-model="formInline.endtime" type="datetime" placeholder="选择结束时间" align="right" :picker-options="pickerOptions"></el-date-picker>
				</el-form-item>
				  <el-form-item label="签到状态">
				    <el-select v-model="formInline.CheckState" placeholder="选择状态">
						<el-option label="全部" value=""></el-option>
				      <el-option label="已签到" value="已签到"></el-option>
				      <el-option label="未签到" value="未签到"></el-option>
				    </el-select>
				  </el-form-item>
				<el-form-item><el-button type="success" @click="search()">搜索</el-button></el-form-item>
			</el-form>

			<!-- 用户列表区 -->
			<el-table :data="userchecklist" border stripe style="width: 100%">
				<el-table-column prop="Id" label="编号" width="70"></el-table-column>
				<el-table-column prop="UserName" label="用户名" width="180"></el-table-column>
				<el-table-column prop="CheckInTime" label="签到时间"></el-table-column>
				<el-table-column prop="CheckState" label="签到状态"></el-table-column>
				<el-table-column prop="IsCancel" label="是否签退"></el-table-column>
				<el-table-column prop="CheckOutTime" label="签退时间"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="warning" @click="cancel(scope.row)">签退</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区 -->
			<el-pagination
				v-on:size-change="sizechange"
				v-on:current-change="pagechange"
				:current-page="page"
				:page-sizes="[5, 10, 15]"
				:page-size="100"
				layout="total, sizes, prev, pager, next, jumper"
				:total="count"
			></el-pagination>
			
		</el-card>
	</div>
</template>
<script>
export default {
	data() {
		return {
			formInline: {
				UserName: '',
				starttime: '',
				endtime: '',
				CheckState:''
			},
			count:0,
			page:1,
			limit:5,
			userchecklist:[],
			pickerOptions:{}
		};
	},
	created() {
		this.getuserchecklist()
	},
	methods: {
		//获取用户签到表
	    async getuserchecklist(){
			const { data: res } = await this.$http.get('/api/api/Staffclock/getuserchecktable', {
				params: {
					page: this.page,
					limit: this.limit,
					UserName: this.formInline.UserName,
					starttime:this.formInline.starttime,
					endtime:this.formInline.endtime,
					CheckState:this.formInline.CheckState
				}
			});
			if (res.code !== 0) return this.$message.error('获取数据失败');
			this.userchecklist = res.data;
			this.count = res.count;
		},
		//更改数据条数重载
		sizechange(val){
			this.limit=val
			this.getuserchecklist()
		},
		//更改数据页数重载
		pagechange(val){
			this.page=val
			this.getuserchecklist()
		},
		search(){
			this.getuserchecklist()
		},
		async cancel(row){
			const { data: res } = await this.$http.post('/api/api/Staffclock/checkOut',row);
			console.log(res)
			if(res.code!==0) return this.$message.error(res.msg);
			this.$message.success(res.msg);
			this.getuserchecklist()
		}
		
	}
};
</script>
